<template>
  <div class="smsLog_page_class">
    <div class="shadow_bg_class"
         style="width: 100%;color: #ffffff;padding: 12px ">

      <el-form ref="filters" :model="filters" label-width="100px">
        <el-row :gutter="20" style="margin-bottom: 0px">
          <el-col :span="6">
            <el-form-item label="手机号：" style="margin-bottom: 0 !important;">
              <el-input
                  v-model="filters.mobile"
                  placeholder="请输入手机号" clearable>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="风险点：" style="margin-bottom: 0 !important;">
              <el-select v-model="filters.position" placeholder="请选择" clearable>
                <el-option
                    v-for="item in riskPositionList"
                    :key="item.id"
                    :label="item.riskPosition"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="空间位置：" style="margin-bottom: 0 !important;">
              <el-input
                  v-model="filters.area"
                  placeholder="请输入空间位置" clearable>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6" style="display: flex;justify-content: flex-end">
            <el-button type="primary"
                       style="background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.18);"
                       @click="handleSearch">搜索
            </el-button>
          </el-col>
        </el-row>

      </el-form>

    </div>
    <el-table :data="smsLogList" class="wxtable" style="margin-top: 12px">
      <el-table-column
          prop="id"
          label="ID" width="80" align='center'>
      </el-table-column>
      <el-table-column prop="position" label="风险点" width="120" align='center'>
      </el-table-column>
      <el-table-column prop="grade" label="风险等级" width="120" align='center'>
      </el-table-column>
      <el-table-column prop="area" label="点位区域" align='center'>
      </el-table-column>
      <el-table-column prop="errMsg" label="错误信息" align='center'>
      </el-table-column>
      <el-table-column prop="mobile" label="通知手机号" width="120"  align='center'>
      </el-table-column>
      <el-table-column prop="type" label="是否发送成功" align='center' width="120">
        <template slot-scope="scope">
          <span style="color: #52c41a" v-show="scope.row.success">发送成功</span>
          <span style="color: #f5222d" v-show="!scope.row.success">发送失败</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-floor">
      <div>

        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="smsLogPage.page+1"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="smsLogPage.rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="smsLogPage.count">
        </el-pagination>
      </div>
    </div>

  </div>

</template>

<script>
import sms_log_list_page_bus from './sms_log_list_page_bus.js'

export default sms_log_list_page_bus

</script>
<style scoped>

</style>
